<template>
    <div>
      <el-row class='left-bar'>
        <el-col :span="24">
          <el-menu
            default-active="2"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSelect"
          >
            <el-menu-item index="1">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>最新</span>
            </el-menu-item>
            <el-menu-item index="2">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>热榜</span>
            </el-menu-item>
            <el-menu-item index="3">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>前端</span>
            </el-menu-item>
            <el-menu-item index="4">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>后端</span>
            </el-menu-item>
            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <icon-menu/>
                </el-icon>
                <span>七七八八</span>
              </template>
              <el-menu-item-group title="工具">
                <el-menu-item index="1-1">IDE</el-menu-item>
                <el-menu-item index="1-2">虚拟机</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="前沿技术">
                <el-menu-item index="1-3">AI</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="6">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>碎碎念</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
</template>

<script lang="ts" setup>
  import {
      reactive} from 'vue'
  import {
    Menu as IconMenu,
  } from '@element-plus/icons-vue'
  import { defineEmits } from 'vue'
  
  const emit = defineEmits<{
    (e: 'changeLeftMenu', key: string, keyPath: string[]): void
  }>()
  //点击菜单项触发（如果有子结构那就是展开触发
  const handleOpen = (key: string, keyPath: string[]) => {
    //console.log(key, keyPath)
  }
  //二度菜单项触发（如果有子结构那就是收起触发
  const handleClose = (key: string, keyPath: string[]) => {
    //console.log(key, keyPath)
  }
  //顶栏菜单栏的切换(如果有子结构则不会触发，因为这时候的点击就是展开，而非选中
  const handleSelect = (key: string, keyPath: string[]) => {
    emit('changeLeftMenu',key,keyPath)
  }

</script>

<style scoped></style>
